<template>
  <BasicModal @register="registerModal" :width="1200" :defaultFullscreen="false" :canFullscreen="false">
    <template #title>
      <info-circle-two-tone />
      代码生成结果
    </template>
    <template #footer>
      <a-button @click="handleClose">关闭</a-button>
      <a-button type="primary" ghost @click="handleView">在线预览</a-button>
      <a-button type="primary" @click="onDownloadGenerateCode" :loading="loading">下载到本地</a-button>
    </template>
    <div :style="divStyle">
      <template v-for="(item, index) in codeList" :key="index">
        <p>{{ item }}</p>
      </template>
    </div>
  </BasicModal>
  <code-file-view-modal @register="registerCodeViewModal" @download="onDownloadGenerateCode" @close="handleClose" />
</template>
<script lang="ts">
  import { ref, reactive, defineComponent } from 'vue';
  import { defHttp } from '/@/utils/http/axios';
  import '/@/components/Form';
  import { BasicModal, useModalInner, useModal } from '/@/components/Modal';
  import { InfoCircleTwoTone } from '@ant-design/icons-vue';
  import CodeFileViewModal from './CodeFileViewModal.vue';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { downloadByData } from '/@/utils/file/download';

  export default defineComponent({
    name: 'CodeFileListModal',
    components: {
      BasicModal,
      InfoCircleTwoTone,
      CodeFileViewModal,
    },
    emits: ['register'],
    setup() {
      const { createMessage: $message } = useMessage();
      const codeList = ref([]);
      const height = window.innerHeight - 150;
      const divStyle = reactive({
        overflowY: 'auto',
        maxHeight: height + 'px',
      });
      const loading = ref(false);
      const tableName = ref('');
      const pathKey = ref('');
      const [registerModal, { closeModal }] = useModalInner(async (data) => {
        codeList.value = data.codeList;
        tableName.value = data.tableName;
        pathKey.value = data.pathKey;
      });
      function handleClose() {
        closeModal();
      }
      function onDownloadGenerateCode() {
        let codeFileList = codeList.value;
        if (!codeFileList || codeFileList.length == 0) {
          $message.warning('无代码！');
          return;
        }
        let temp = codeFileList.join(',');
        return defHttp
          .post(
            {
              url: '/api-online/online/cgform/api/downGenerateCode',
              params: {
                fileList: encodeURI(temp),
                pathKey: pathKey.value,
              },
              responseType: 'blob',
            },
            { isTransformResponse: false }
          )
          .then((data) => {
            if (!data || data.size == 0) {
              $message.warning('导出代码失败！');
              return;
            }
            let fileName = '导到生成代码_' + tableName.value + '_' + new Date().getTime() + '.zip';
            downloadByData(data, fileName, 'application/zip');
          });
      }
      const [registerCodeViewModal, { openModal }] = useModal();
      function handleView() {
        let temp = codeList.value;
        openModal(true, {
          codeList: temp,
          pathKey: pathKey.value,
        });
      }
      return {
        registerModal,
        registerCodeViewModal,
        divStyle,
        codeList,
        onDownloadGenerateCode,
        handleClose,
        handleView,
        loading,
      };
    },
  });
</script>
<style scoped></style>
